import React,{Component} from 'react';

import { px2dp, px2sp } from '../../utils/DisplayUtils';
import {StyleSheet, Text, View, TouchableHighlight,ScrollView, Modal } from 'react-native';

import { AnimatedCircularProgress } from 'react-native-circular-progress';
import Svg, {
  G,
  Path,
} from 'react-native-svg';

export default class ProgressHub extends Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
        isShow: false

    }

  }

  componentDidMount(){

  }



  render() {

    const that = this;
  
  
    let proStr =  "M5 8 l" + (this.props.progress * 1.75) + " 0"
  

    return (
    



            <Modal 
            animationType='slide'
            transparent={true}
            onRequestClose={()=>{

            }}>
              <View  style={styles.container}>
                <View  style={styles.containerCenter}>

                   {/* <AnimatedCircularProgress
                    size={120}
                    width={15}
                    fill={this.props.progress}
                    tintColor="#00e0ff"
                    onAnimationComplete={() => {
                                                    
                       // console.log("this.props.progress",this.props.progress)
                       
                    }}
                    backgroundColor="#3d5875" >

                {(fill) => (
                <View >
                    <Text >{this.props.progress}%</Text>
                </View>
              )}

                    </AnimatedCircularProgress> */}

                <Svg height="24" width="185">
                    <G fill="none" stroke="#3d5875">
                        <Path strokeLinecap="round" strokeWidth="8" d="M5 8 l175 0" />
                    </G>
                    <G fill="none" stroke="#00e0ff">
                        <Path strokeLinecap="round" strokeWidth="8" d={proStr}/>
                    </G>
                </Svg>
                <View >
                    <Text >{this.props.progress}%</Text>
                </View>

                </View>
              </View>



            </Modal>
       

    );
  }
}


/** 样式表*/
const styles = StyleSheet.create({


  container: {
  
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    flex:1,
    borderColor:"#efefef",
    backgroundColor:'rgba(0,0,0,0.5)'
  },
  containerCenter: {
  
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    width: px2dp(200),
    height: px2dp(200),
    borderRadius:8,
    borderColor:"#efefef",
    backgroundColor:"#ffffff",
    borderWidth: 1
  },
  
  contentText:{
    color:"#999999",
    fontSize: px2dp(14)
  },

  
  


});
